<template>
  <div class="charts-container">
    <div ref="lineChart" class="chart-item"></div>
    <div ref="barChart" class="chart-item"></div>
    <div ref="pieChart" class="chart-item"></div>
    <div ref="radarChart" class="chart-item"></div>
    <div ref="funnelChart" class="chart-item"></div>
    <div ref="pictorialBarChart" class="chart-item"></div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const lineChart = ref(null);
    const barChart = ref(null);
    const pieChart = ref(null);
    const radarChart = ref(null);
    const funnelChart = ref(null);
    const pictorialBarChart = ref(null);
    let lineInstance, barInstance, pieInstance, radarInstance, funnelInstance, pictorialBarInstance;

    const initCharts = () => {
      // 折线图 - 借阅趋势（使用科技蓝主色）
      lineInstance = echarts.init(lineChart.value);
      lineInstance.setOption({
        title: { 
          text: '月度借阅趋势', 
          left: 'center', 
          textStyle: { color: '#2c3e50' } // 深蓝主色[6](@ref)
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月'],
          axisLabel: { color: '#3498db' } // 科技蓝标签
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#27ae60' } // 深绿色
        },
        series: [{
          data: [285, 320, 410, 398, 450], 
          type: 'line',
          smooth: true,
          color: '#3498db', // 科技蓝
          areaStyle: { color: 'rgba(52,152,219,0.1)' },
          symbol: 'circle',
          symbolSize: 14
        }]
      });

      // 柱状图 - 分类借阅排行（使用蓝绿渐变）
      barInstance = echarts.init(barChart.value);
      barInstance.setOption({
        title: { 
          text: '图书分类借阅排行', 
          left: 'center', 
          textStyle: { color: '#2c3e50' } 
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['文学', '科技', '历史', '艺术', '教育'],
          axisLabel: { color: '#2ecc71', rotate: 30 }
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#27ae60' }
        },
        series: [{
          data: [689, 532, 478, 415, 389], 
          type: 'bar',
          barWidth: '60%',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2ecc71' }, // 活力绿
            { offset: 1, color: '#3498db' }  // 科技蓝
          ]),
          itemStyle: { 
            borderRadius: [5, 5, 0, 0],
            shadowColor: 'rgba(46,204,113,0.3)' 
          }
        }]
      });

      // 饼图 - 读者类型分布（使用学术配色）
      pieInstance = echarts.init(pieChart.value);
      pieInstance.setOption({
        title: { 
          text: '读者类型分布', 
          left: 'center', 
          textStyle: { color: '#2c3e50' } 
        },
        tooltip: { 
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} (占比{d}%)' 
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          label: { color: '#2c3e50' },
          data: [
            { value: 45, name: '学生', itemStyle: { color: '#3498db' } }, // 科技蓝
            { value: 32, name: '教师', itemStyle: { color: '#2ecc71' } },  // 活力绿
            { value: 18, name: '研究员', itemStyle: { color: '#2980b9' } },  // 深蓝
            { value: 5, name: '社会读者', itemStyle: { color: '#27ae60' } },  // 深绿
          ],
          emphasis: { 
            itemStyle: { 
              shadowBlur: 10,
              shadowColor: 'rgba(52,152,219,0.2)'
            } 
          }
        }]
      });

      // 雷达图 - 图书质量评估（使用蓝绿系）
      radarInstance = echarts.init(radarChart.value);
      radarInstance.setOption({
        title: { 
          text: '图书质量评估', 
          left: 'center', 
          textStyle: { color: '#2c3e50' } 
        },
        radar: {
          indicator: [
            { name: '借阅量', max: 100 },
            { name: '完好率', max: 100 },
            { name: '评分', max: 5 },
            { name: '库存量', max: 100 },
            { name: '续借率', max: 100 }
          ],
          axisLine: { lineStyle: { color: '#3498db' } }
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [88, 92, 4.5, 85, 78],
              name: '文学类',
              color: '#3498db',
              areaStyle: { color: 'rgba(52,152,219,0.2)' }
            },
            {
              value: [76, 85, 4.2, 90, 68],
              name: '科技类',
              color: '#2ecc71',
              areaStyle: { color: 'rgba(46,204,113,0.2)' }
            }
          ],
          symbol: 'circle',
          symbolSize: 10
        }]
      });

      // 漏斗图 - 图书流转分析
funnelInstance = echarts.init(funnelChart.value);
funnelInstance.setOption({
  title: {
    text: '图书流转分析',
    left: 'right', // 修改标题位置到右侧
    textStyle: { color: '#2c3e50' }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: ['借阅', '续借', '预约', '归还', '上架'],
    textStyle: { color: '#2c3e50' }
  },
  series: [{
    name: '图书流转',
    type: 'funnel',
    left: '10%',
    top: '10%',
    bottom: '10%',
    width: '80%',
    min: 0,
    max: 100,
    minSize: '0%',
    maxSize: '100%',
    sort: 'descending',
    gap: 2,
    label: {
      show: true,
      position: 'inside',
      color: '#fff'
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1
    },
    data: [
      { value: 100, name: '借阅' },
      { value: 75, name: '续借' },
      { value: 50, name: '预约' },
      { value: 80, name: '归还' },
      { value: 90, name: '上架' }
    ],
    color: [
      '#3498db', '#2ecc71', '#2980b9', '#27ae60', '#f1c40f'
    ]
  }]
});
      // 象形柱图 - 图书收藏量统计
      pictorialBarInstance = echarts.init(pictorialBarChart.value);
      pictorialBarInstance.setOption({
        title: {
          text: '图书收藏量统计',
          left: 'center',
          textStyle: { color: '#2c3e50' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          data: ['文学', '科技', '历史', '艺术', '教育', '哲学', '医学'],
          axisLabel: {
            color: '#3498db',
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          splitLine: { show: false },
          axisLabel: { color: '#27ae60' }
        },
        series: [
          {
            name: '图书数量',
            type: 'pictorialBar',
            symbol: 'path://M16 4h-2v9H8V4H6v9H2L8 19l6-6h-4V4z', // 书籍图标
            symbolRepeat: true,
            symbolSize: 18,
            symbolMargin: '1%',
            data: [1200, 1050, 900, 750, 600, 450, 300],
            color: '#3498db',
            label: {
              show: true,
              position: 'top',
              color: '#2c3e50',
              formatter: function(params) {
                return params.value;
              }
            }
          }
        ]
      });
    };

    const handleResize = () => {
      [lineInstance, barInstance, pieInstance, radarInstance, funnelInstance, pictorialBarInstance].forEach(
        chart => chart && chart.resize()
      );
    };

    onMounted(() => {
      initCharts();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      [lineInstance, barInstance, pieInstance, radarInstance, funnelInstance, pictorialBarInstance].forEach(
        chart => chart && chart.dispose()
      );
    });

    return { lineChart, barChart, pieChart, radarChart, funnelChart, pictorialBarChart };
  }
}
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 1000px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #f0f8ff 0%, #e6f9ff 100%); /* 浅蓝绿渐变 */
  gap: 15px;
}

.chart-item {
  width: 100%;
  height: 95%;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(52,152,219,0.1); /* 科技蓝阴影 */
  border-radius: 12px;
  background: rgba(255,255,255,0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(52,152,219,0.2); /* 科技蓝边框 */
}

.chart-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 30px rgba(52,152,219,0.15);
}
</style>  